<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '二手市场',
  },
}
</route>

<template>
  <wd-navbar title="二手市场" left-text="" left-arrow @click-left="handleClickLeft"></wd-navbar>
  <!-- 搜索框 -->
  <view class="flex flex-items-center px-2 mt-2 mb-4">
    <view class="search-box">
      <img class="icon" src="@img/second-market/search.png" alt="" />
      <view class="btn">搜索</view>
    </view>
    <view class="icons flex flex-items-center flex-justify-center">
      <img src="@img/second-market/add.png" alt="" />
    </view>
  </view>
  <img class="banner-img px-4" src="@img/home/banner-1.png" alt="" />
  <view class="px-4 my-2 flex flex-items-center justify-between">
    <view class="flex flex-items-center" v-for="(item, index) in list" :key="index">
      <text style="font-size: 0.88rem; color: rgba(0, 0, 0, 1)">{{ item }}</text>
    </view>
  </view>
  <view class="flex flex-items-center justify-between px-9">
    <view class="flex flex-items-center" v-for="(item, index) in filterList" :key="index">
      <text style="font-size: 0.88rem; color: #7a7676">{{ item }}</text>
      <wd-icon name="caret-down-small" size="22px"></wd-icon>
    </view>
  </view>
  <view class="shops px-6 grid grid-cols-2 gap-4 mt-3">
    <view
      class="shop rounded-md flex flex-col overflow-hidden"
      v-for="(item, index) in shopList"
      :key="index"
    >
      <img class="shop-img" :src="item.shopImg" alt="" />
      <view class="content flex-1 px-1">
        <view class="flex justify-between flex-items-center">
          <text class="left-text">{{ item.shopTitle }}</text>
          <text class="right-text">{{ item.newTitle }}</text>
        </view>
        <view class="flex flex-items-center mt-1">
          <text class="left-money">{{ item.price }}</text>
          <text class="right-money">{{ item.oldPrice }}</text>
        </view>
        <view class="flex flex-items-center justify-between">
          <view class="avatar-content flex flex-items-center">
            <img class="avatar" :src="item.avatar" alt="" />
            <text>{{ item.person }}</text>
          </view>
          <view class="love">
            <wd-icon
              v-show="item.like"
              class="like"
              name="heart-filled"
              color="#EB4F47"
              size="22px"
              @click="handleLike(item, false)"
            ></wd-icon>
            <wd-icon
              v-show="!item.like"
              class="nolike"
              name="heart"
              size="22px"
              @click="handleLike(item, true)"
            ></wd-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const handleClickLeft = () => {
  uni.navigateBack()
}
const list = ref<string[]>(['全部', '生活用品', '二手书本', '学习用品', '电子设备'])

const filterList = ref<string[]>(['排序', '价格', '新旧'])

const shopList = ref([
  {
    shopImg: new URL('@img/1.png', import.meta.url).href,
    shopTitle: '宜家抱枕',
    newTitle: '9成新',
    price: '￥20.00',
    oldPrice: '￥45.00',
    avatar: new URL('@img/second-market/avatar.png', import.meta.url).href,
    person: '小张同学',
    like: false,
  },
  {
    shopImg: new URL('@img/1.png', import.meta.url).href,
    shopTitle: '宜家抱枕',
    newTitle: '9成新',
    price: '￥20.00',
    oldPrice: '￥45.00',
    avatar: new URL('@img/second-market/avatar.png', import.meta.url).href,
    person: '小张同学',
    like: false,
  },
  {
    shopImg: new URL('@img/2.png', import.meta.url).href,
    shopTitle: '宜家抱枕',
    newTitle: '9成新',
    price: '￥20.00',
    oldPrice: '￥45.00',
    avatar: new URL('@img/second-market/avatar.png', import.meta.url).href,
    person: '小张同学',
    like: false,
  },
  {
    shopImg: new URL('@img/2.png', import.meta.url).href,
    shopTitle: '宜家抱枕',
    newTitle: '9成新',
    price: '￥20.00',
    oldPrice: '￥45.00',
    avatar: new URL('@img/second-market/avatar.png', import.meta.url).href,
    person: '小张同学',
    like: false,
  },
  {
    shopImg: new URL('@img/3.png', import.meta.url).href,
    shopTitle: '宜家抱枕',
    newTitle: '9成新',
    price: '￥20.00',
    oldPrice: '￥45.00',
    avatar: new URL('@img/second-market/avatar.png', import.meta.url).href,
    person: '小张同学',
    like: false,
  },
  {
    shopImg: new URL('@img/3.png', import.meta.url).href,
    shopTitle: '宜家抱枕',
    newTitle: '9成新',
    price: '￥20.00',
    oldPrice: '￥45.00',
    avatar: new URL('@img/second-market/avatar.png', import.meta.url).href,
    person: '小张同学',
    like: false,
  },
  {
    shopImg: new URL('@img/4.png', import.meta.url).href,
    shopTitle: '宜家抱枕',
    newTitle: '9成新',
    price: '￥20.00',
    oldPrice: '￥45.00',
    avatar: new URL('@img/second-market/avatar.png', import.meta.url).href,
    person: '小张同学',
    like: false,
  },
  {
    shopImg: new URL('@img/4.png', import.meta.url).href,
    shopTitle: '宜家抱枕',
    newTitle: '9成新',
    price: '￥20.00',
    oldPrice: '￥45.00',
    avatar: new URL('@img/second-market/avatar.png', import.meta.url).href,
    person: '小张同学',
    like: false,
  },
])
const handleLike = (item: any, flag: boolean) => {
  item.like = flag
}
</script>

<style scoped lang="scss">
.search-box {
  position: relative;
  width: 20.25rem;
  height: 2.5rem;
  background-color: #f2f3f7;
  border-radius: 1.25rem;
  .icon {
    position: absolute;
    top: 0.5rem;
    left: 0.94rem;
  }
  .btn {
    position: absolute;
    top: 0.2rem;
    right: 0.44rem;
    width: 4.69rem;
    height: 2.06rem;
    font-family: PingFangSC-regular;
    font-size: 0.88rem;
    line-height: 2.06rem;
    color: rgba(86, 140, 250, 1);
    text-align: center;
    background-color: #f2f3f7;
    border: 0.06rem solid rgba(86, 140, 250, 1);
    border-radius: 1.31rem;
  }
}
.icons {
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.38rem;
  background-color: #658ef7;
  border-radius: 50%;
}
.banner-img {
  width: 21.56rem;
  height: 9.38rem;
}
.shops {
  .shop {
    width: 9.13rem;
    height: 12.7rem;
    .shop-img {
      width: 9.13rem;
      height: 8.31rem;
    }
    .content {
      background-color: #f2f3f7;
      .left-text {
        width: 4.75rem;
        height: 1.19rem;
        font-family: PingFangSC-regular;
        font-size: 1rem;
        line-height: 1.44rem;
        color: rgba(16, 16, 16, 1);
        text-align: left;
      }
      .right-text {
        width: 1.88rem;
        height: 0.69rem;
        font-size: 0.69rem;
        color: #658ef7;
      }
      .left-money {
        width: 3.25rem;
        height: 1.25rem;
        font-family: PingFangSC-regular;
        font-size: 1rem;
        line-height: 1.25rem;
        color: rgba(189, 49, 36, 1);
        text-align: left;
      }
      .right-money {
        width: 2.38rem;
        height: 0.5rem;
        margin-left: 0.56rem;
        font-size: 0.5rem;
        color: rgba(164, 173, 179, 1);
        text-decoration: line-through;
      }
      .avatar-content {
        .avatar {
          width: 1.69rem;
          height: 1.69rem;
          border-radius: 2.44rem;
        }
        text {
          width: 3.25rem;
          height: 1.25rem;
          margin-top: 0.5rem;
          margin-left: 0.5rem;
          font-family: PingFangSC-regular;
          font-size: 0.81rem;
          line-height: 1.19rem;
          color: rgba(16, 16, 16, 1);
          text-align: left;
        }
      }
      .love {
        @keyframes pulse {
          from {
            transform: scale3d(1, 1, 1);
          }
          50% {
            transform: scale3d(1.5, 1.5, 1.5);
          }
          to {
            transform: scale3d(1, 1, 1);
          }
        }
        .like {
          animation: pulse 1s ease-in-out;
        }
        .nolike {
          transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
        }
      }
    }
  }
}
</style>
